<template>
  <div class="right-content">
    <div class="content">
        <div class="title">
          <span class="info">
              经销商
          </span>
          <span>
            <Button icon='md-add' type="primary" @click='onHandleClick'>新增经销商</Button>
            <Button type="default" @click='getData'>刷新</Button>
          </span>
        </div>
        <Row class="fleft mt pl pb">
          <Col span="15" class="fleft"><span class="w100">经销商名: </span><Input v-model.trim="name" search enter-button placeholder="经销商名称或手机号查询" type="text" @on-search='onSearch' /></Col>
          <Col span="9" align="right">
            <Dropdown @on-click='onManageDepart' class="mr">
              <Button type="primary">
                  批量编辑
              </Button>
              <DropdownMenu slot="list">
                  <DropdownItem name='move'>移动到部门</DropdownItem>
                  <DropdownItem name='remove'>选中删除</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Col>
        </Row>
        <Row class="mt pl pb">
          <homeTable
            :translate='80'
            :list="list"
            @getData="getData"
            @onPageSizeChange="onPageSizeChange"
            @onPageChange="onPageChange"
            @onSelectionChange='onSelectionChange'
          />
        </Row>
    </div>
    <selectModalItem @addSuccess='onAddSuccess' ref="selectModalItem" />
    <MoveSomeDistributor @successMove='onSuccessMove' ref="moveSomeDistributor" />
    <sortCompanyItem @sortSuccess='getData' ref="sortCompanyItem" />
  </div>
</template>
<script>
import homeTable from "~/homeTable";
import selectData from "./selectData";
import selectModalItem from "./selectModalItem";
import sortCompanyItem from "./sortCompanyItem";
import MoveSomeDistributor from './MoveSomeDistributor'
import { mapGetters } from 'vuex';
export default {
  components: {
    homeTable,
    selectModalItem,
    sortCompanyItem,
    MoveSomeDistributor
  },
  data() {
    return {
      list: selectData,
      name: '',
      url: '/department/queryDistributorDepartment',
      selectedDepart: []
    }
  },
  computed: {
    ...mapGetters(['currentDepartment']),
    isSort() {
      return this.currentDepartment&&this.currentDepartment.level != 3
    }
  },
  mounted() {
    this.$bus.$on('deletItem', this.deletItem)
    this.getData()
  },
  methods: {
    onSuccessMove() {
      this.getData()
      this.selectedDepart = []
      this.$emit('update')
    },
    onAddSuccess() {
      this.getData()
      this.$emit('update')
    },
    onManageDepart(val) {
      if (!this.selectedDepart.length) {
        this.$Notice.warning({ title: '请选择要操作的经销商' })
        return
      }
      let arr = this.selectedDepart.map(item => item.distributorId)
      if (val === 'remove') {
        this.$Modal.confirm({
          title: '批量删除',
          content: '<p>您确定要删除经销商部门关联关系吗？</p>',
          onOk: () => {
            this.deletItem(arr)
          }
        });
      } else {
        this.$refs.moveSomeDistributor.open(arr)
      }
    },
    onSelectionChange(val) {
      this.selectedDepart = val
    },
    deletItem(val) {
      let params = []
      if (Array.isArray(val)) {
        params = val
      } else {
        params = [val.distributorId]
      }
      this.list.status = "loading";
      this.$jsonPost(`/department/delete_department_bind`, { distributorIds: params }).then(res => {
        this.getData()
        this.selectedDepart =[]
        this.$emit('update')
      }).catch(err => {
        this.list.status = "pass";
      })
    },
    onHandleClick() {
      this.$refs.selectModalItem.openModal();
    },
    onSearch() {
      this.getData()
    },
    getData() {
      if (!this.url) return
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        departId: this.id,
        keyword: this.name
      };
      this.list.status = "loading";
      this.$jsonPost(this.url, param).then(data => {
          this.list.totalItem = Number(data.total);
          this.list.data = (data.records || []);
          this.list.status = "pass";
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.getData();
    },
    sortCompany() {
      this.$refs.sortCompanyItem.openModal()
    },
  },
  watch: {
    currentDepartment(val) {
      if(val && val.id) {
        const {id} = val
        this.id = id
        this.getData()
      }
    }
  }
}
</script>
